<template>
	
	<view style="height: 100%;">
		<view class="centent">
			<view class="navtopbox">
				<view class="navtopboxcenter">
					<scroll-view scroll-y="true" style="height:100% ;">
					<view class="title">
						<text>【{{newsname}}】</text>
					</view>
					<view class="time">
						<text>发布日期：{{time}}</text>
					</view>
					<view class="navcentent">
						<rich-text :nodes="content"></rich-text>
					</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,				
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				id:0,
				content:'',
				newsname:'',
				time:''
			}
		},
		methods: {
			getxiangqing(){
				this.$store
					.dispatch('getxiangqing', {
						token: this.userInfo.token,
						id: this.id						
					})
					.then(res => {
						
						this.newsname = res.data.data.newsname
						this.content = res.data.data.content
						this.time = res.data.data.time
						this.getshowrichtext()
					});
				
				
			},
			getshowrichtext(){
				let richtext = this.content;
				let regex = new RegExp('<img', 'gi');  
				richtext = richtext.replace(regex, `<img style="max-width:100%;height:auto"`);              
				this.content = richtext;
			}
				
		},
		onLoad(data) {
			this.id = data.id
			
		},
		onShow() {
			if (!this.isLogin) {
				if (uni.getStorageSync("token")) { //判断是否有token，然后调用自动登录的接口
					this.$store
						.dispatch('loginByWexin')
						.then(res => {
							this.code = res
							this.$store
								.dispatch('apiUserAutoLogin', {
									token: uni.getStorageSync("token")
								})
								.then(res => {
									this.getxiangqing()
								});
						});
				} else { //没有token，去登录页面点击登录				
					uni.navigateTo({
						url: '../login/login'
					})
				}
		
			} else {
				this.getxiangqing()
			}
		}
		
	}
</script>

<style lang="less">
page {
		height: 100%;
		background-color: #f4f4f4;
		box-sizing: border-box;

	}

	.centent {
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;

		.navtopbox {
			width: 100%;
			height: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.navtopboxcenter {
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				border-radius: 15rpx;
				overflow: hidden;
				padding: 30rpx 20rpx;
				box-sizing: border-box;

				.title {
					font-size: 35rpx;
					font-weight: bold;
					color: #000000;
					margin-bottom: 10rpx;

				}

				.time {
					font-size: 24rpx;
					color: #ccc;
					margin-bottom: 30rpx;
				}

				.navcentent {
					font-size: 26rpx;

				}

			}
		}


	}
</style>
